<template>
  <div>
    <div class="box">
      <van-nav-bar
        title="图文资讯"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
        @click-right="$router.push('/home')"
      >
        <template #right> <van-icon name="wap-home-o" size="25" /> </template
      ></van-nav-bar>
    </div>

    <div
      class="nav"
      v-for="item in newsList"
      :key="item.id"
      @click="$router.push({ path: `/informdetails/${item.id}` })"
    >
      <img class="imges" :src="item.img_url" alt="" />
      <div class="nav_1">
        {{ item.title }}
        <p>
          {{ item.add_time | formatDate }}
          <span>点击：{{ item.click }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { getnewsList } from "../apis/user";
export default {
  data() {
    return {
      newsList: [],
    };
  },
  async created() {
    const res = await getnewsList();
    // console.log(res);
    this.newsList = res.data.message;
    // console.log(this.newsList);
  },
};
</script>

<style lang="less" scoped>
.box {
  margin-top: 40px;
}
/deep/ .van-nav-bar {
  background: #f7f7f7;
  //   height: 40px;
  .van-nav-bar__title,
  .van-nav-bar__text {
    text-align: center;
    color: #007aff;
    font-size: 20px;
  }
}
.nav {
  border-top: 1px solid red;
  display: flex;
  font-size: 14px;
  color: #878787;
  padding: 11px 12px;
}
.imges {
  width: 42px;
  height: 42px;
}
.nav_1 {
  padding-left: 10px;
}
p {
  width: 290px;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  color: #4cb4ff;
}
</style>